<template>
  <div>
  <Main_header></Main_header>
  <div class="common" style="margin-top: 30px">
    <div class="content">
      <!--全部商品图片展示-->
      <div class="contentImg">
        <div class="title">
          <h2>收银台</h2>
          <div>
          </div>
        </div>
        <div style="padding-bottom: 100px;">
          <div slot="content">
            <div class="box-inner order-info">
              <p class="payment-detail">扫一扫付款（元）</p>
              <p class="payment-money">{{orderTotal}}</p>
              <div class="num">
                <span>{{ count }}秒后跳确认支付状态</span>
              </div>
              <div class="img-box">
                <img id="qr" class="pic"  src="../../assets/img/pay.jpg" alt="加载失败" width="168px" height="168px"/>
                <div class="explain">
                  <img class="fn-left" src="https://t.alipayobjects.com/images/T1bdtfXfdiXXXXXXXX.png" alt="扫一扫标识">
                  <div class="fn-right">打开手机支付宝<br>扫一扫继续付款</div>
                </div>
              </div>
              <a class="download-alipay" href="https://mobile.alipay.com/index.htm" target="_blank">首次使用请下载手机支付宝</a>

              <div class="qrguide-area">
                <img src="https://t.alipayobjects.com/images/rmsweb/T13CpgXf8mXXXXXXXX.png" :class="show?'show-img':'close-img'" @click="changePic()">
                <img src="https://t.alipayobjects.com/images/rmsweb/T1ASFgXdtnXXXXXXXX.png" :class="show?'close-img':'show-img'" @click="changePic()">
              </div>

              <img src="../../assets/img/red.png" width="50px" height="50px" class="red" title="支付领红包" @click="showRed()">
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>


    <el-dialog
      title="支付红包"
      :visible.sync="dialogVisible"
      width="40%"
      style="text-align:center;width:50%;margin:0 auto">
      <img src="../../assets/img/redpay.jpg" class="qr-red"/>
      <span>支付前领个红包吧(每日可领一次)</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="alwaysTake">领取了</el-button>
      </span>
    </el-dialog>
    <Main_footer style="margin:0 auto"></Main_footer>
  </div>
</template>
<script>
  import Main_header from '../../components/main/Main_header'
  import Main_footer from '../../components/main/Main_footer'
  export default {
    name:'PayGood',
    components: {
      Main_footer,
      Main_header
    },
    data () {
      return {
        show: true,
        userId: '',
        orderTotal: '',
        dialogVisible: true,
        picName: '',
        count: '',// 倒计时
        rent:{
          rentId:undefined,
          singlePrice:undefined,
          dayPrice:undefined,
          paystate:1
        }
      }
    },
    computed: {
    },
    methods: {
      alwaysTake(){
        this.dialogVisible = false
        // 10s后弹窗确认支付状态
        this.goMain()
      },
      changePic () {
        this.show = !this.show
      },
      showRed () {
        this.dialogVisible = true
      },
      //2秒后跳转界面
      goMain() {
        const TIME_COUNT = 10
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null

              // 判断
              this.$confirm('订单已支付?', '确认支付状态', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.putRequest('/rent/data/updateRent',this.rent).then(resp=>{
                  this.$notify.success({ title: '成功', message: '订单已支付' });
                  // 跳转到选人加分界面
                  this.$router.push('/rent/data')
                })
              }).catch(() => {
                this.$notify.info({ title: '消息', message: '已取消操作' });
              });

            }
          }, 1000)
        }
      }
    },
    mounted () {
      // 取到detail页面的路由带过来的参数
      let price = this.$route.params.name;
      this.rent.dayPrice = this.$route.params.dayPrice;
      this.rent.rentId = this.$route.params.rentId;
      this.rent.singlePrice = this.$route.params.singlePrice;
      console.log('3个路由参数'+this.$route.params.dayPrice+this.$route.params.rentId+this.$route.params.singlePrice)
      this.orderTotal = price
    },
  }
</script>
<style lang="scss" scoped rel="stylesheet/scss">

  .order-info {
    padding: 60px 0 55px;
    color: #333;
    background: #fff !important;
    h3 {
      padding-bottom: 14px;
      line-height: 36px;
      text-align: center;
      font-size: 36px;
      color: #212121;
    }
    .payment-detail {
      text-align: center;
      line-height: 24px;
      font-size: 14px;
      color: #999;
    }
  }

  .box-inner {
    line-height: 60px;
    background: #f9f9f9;
    border-top: 1px solid #e5e5e5;
    box-sizing: border-box;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      padding: 0 20px;
    }
    em {
      margin-left: 5px;
      font-size: 24px;
      color: #d44d44;
      font-weight: 700;
      margin-right: 20px;
      span {
        margin-right: 4px;
        font-size: 16px;
      }
    }
  }

  .box-btn {
    line-height: 60px;
    background: #f9f9f9;
    border-top: 1px solid #e5e5e5;
    box-sizing: border-box;
    > div {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 20px;
    }
    em {
      margin-left: 5px;
      font-size: 24px;
      color: #d44d44;
      font-weight: 700;
      margin-right: 20px;
      span {
        margin-right: 4px;
        font-size: 16px;
      }
    }
  }

  .payment-money {
    text-align: center;
    font-size: 30px;
    color: #d44d44;
    font-weight: 700;
  }

  .img-box{
    position: relative;
    width: 180px;
    height: auto;
    min-height: 168px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid #d3d3d3;
    box-shadow: 1px 1px 1px #ccc;
    display: inline-block;
  }

  .explain {
    margin: 5px 0 12px 0;
  }

  .pic{
    margin-top: 3px;
  }

  .fn-left{
    margin-left: -5px;
  }

  .fn-right{
    font-size: 13px;
    color: #4D4D4D;
    line-height: 18px;
    margin: -57px 0 0 33px;
  }

  .download-alipay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin-top: -5px;
    font-size: 12px;
    color: #a6a6a6;
    text-decoration: underline;
    width: 25%;
    margin: 0 auto;
  }

  .qrguide-area {
    position: absolute;
    top: 313px;
    left: 853px;
    width: 204px;
    height: 183px;
    cursor: pointer;
  }

  .show-img{
    display: block;
  }

  .close-img{
    display: none;
  }

  .red {
    position: absolute;
    top: 482px;
    left: 1151px;
    width: 47px;
    height: 50px;
    cursor: pointer;
  }

  .el-dialog--small {
    width: 30%;
  }

  .qr-red {
    display: block;
    margin: 0 auto;
    width: 70%;
  }

  .count {
    display: flex;
    position: absolute;
    text-align: center;
    width: 230px;
    flex-direction: column;
    align-items: center;
    margin-left: calc(50% - 115px);
    margin-top: 0px;
    color: #222;
    margin-top: -18px;
  }

</style>
